<template>
  <div class="container">
    <el-card>
      <el-row>
        <el-col :span="24" class="detail-item">
          <span>创建时间：</span>
          <span>{{ detail.createTime || "-" }}</span>
        </el-col>
        <el-col :span="24" class="detail-item">
          <span>问卷名称：</span>
          <span>{{ detail.name || "-" }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="detail-item">
          <span>题目列表：</span>
        </el-col>
        <Table :columnProps="columnProps" :tableData="detail.tmList"> </Table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import Table from "@/components/Table";
import { Message } from "element-ui";
import { wjAdd, wjEdit, wjDetail } from "@/api/wj";
import { tmList } from "@/api/subject";
import { pagination, page } from "@/utils/enumConfig";
import { param } from "@/utils";

const tmTypeEnum = {
  fill: "填空题",
  single: "单选题",
  multi: "多选题"
};
export default {
  name: "wjAdd",
  components: {
    Table
  },
  data() {
    const columnProps = [
      {
        title: "题目名称",
        dataIndex: "name",
        key: "name"
      },
      {
        title: "题目类型",
        dataIndex: "type",
        key: "type",
        render: record => {
          return `<span>${tmTypeEnum[record.type] || "-"}</span>`;
        }
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
        width: 200
      }
    ];
    return {
      id: "",
      columnProps,
      detail: {}
    };
  },
  async mounted() {
    let { id } = this.$route.params;
    if (id) {
      this.id = id;
      let _this = this;
      let data = await wjDetail({ id });
      if (data) {
        this.detail = data;
      }
    }
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .radio-form {
    ::v-deep .el-form-item__error {
      left: 5%;
    }
  }
  .item-tmxx {
    margin: 20px 0;
  }
  .minus {
    margin-left: 10px;
  }
}
.detail-item {
  margin: 10px 0;
}
.tmxx-container {
  display: flex;
  .tmxx {
  }
}
</style>
